
<template>
    <el-form-item :label="label" :prop="prop" :rules="rules">
      <el-switch
        v-model="innerValue"
        v-bind="$attrs"
        :disabled="disabled"
        :size="size"
        :width="width"
        :active-text="activeText"
        :inactive-text="inactiveText"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        :active-value="activeValue"
        :inactive-value="inactiveValue"
        :active-icon="activeIcon"
        :inactive-icon="inactiveIcon"
        :loading="loading"
        :before-change="beforeChange"
        :inline-prompt="inlinePrompt"
        :validate-event="validateEvent"
        @change="handleChange"
      ></el-switch>
      <div v-if="helpText" class="help-text">{{ helpText }}</div>
    </el-form-item>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  import type { Component } from 'vue'
  
  // 定义组件属性
  interface Props {
    modelValue: string | number | boolean
    prop?: string
    label?: string
    rules?: any[]
    disabled?: boolean
    size?: 'large' | 'default' | 'small'
    width?: number
    activeText?: string
    inactiveText?: string
    activeColor?: string
    inactiveColor?: string
    activeValue?: string | number | boolean
    inactiveValue?: string | number | boolean
    activeIcon?: string | Component
    inactiveIcon?: string | Component
    loading?: boolean
    beforeChange?: () => Promise<boolean> | boolean
    inlinePrompt?: boolean
    validateEvent?: boolean
    helpText?: string
  }
  
  // 设置默认值
  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    prop: '',
    label: '',
    rules: () => [],
    disabled: false,
    size: 'default',
    width: 40,
    activeText: '',
    inactiveText: '',
    activeColor: '',
    inactiveColor: '',
    activeValue: true,
    inactiveValue: false,
    activeIcon: undefined,
    inactiveIcon: undefined,
    loading: false,
    beforeChange: undefined,
    inlinePrompt: false,
    validateEvent: true,
    helpText: ''
  })
  
  // 定义事件
  const emit = defineEmits(['update:modelValue', 'change'])
  
  // 内部值双向绑定
  const innerValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
    }
  })
  
  // 处理值变化事件
  const handleChange = (val: string | number | boolean) => {
    emit('change', val)
  }
  </script>
  
  <style scoped>
  .help-text {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.4;
  }
  </style>  